<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--引入bootStrap-->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/carts1.css">
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"/>
    <!--    bootstrap框架-->
    <link rel='stylesheet' href='css/bootstrap.min.css'>
    <link rel='stylesheet' href='css/bootstrap-theme.min.css'>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="application/javascript" rel="script" src="js/jquery-2.1.1.min.js"></script>
    <script type="application/javascript" rel="script" src="js/bootstrap.min.js"></script>
    <!--导入vue 包-->
    <script src="vue/Vue.v2.6.12.js"></script>
    <script type="text/javascript" src="js/HttpUtil.js"></script>


</head>
<body>

<!--头部-->
<top>
    <section class="seck">
        <div class="register_login">
            <em>您好，</em>
            <a href="login.html">会员登录</a>
            <a href="register.html">快速注册</a>
        </div>
        <div class="vip_center">
            <a href="user_center.html">用户中心</a>
            <a href="#">商户中心</a>
            <a href="#">帮助</a>
        </div>
    </section>
</top>

<!--header-->
<div class="maxbj1">
    <header>
        <b class="logo"><img src="images/logo1.png"></b>
        <search>
            <div>
                <input type="text" placeholder="查询关键词..." required="" id="search_title"
                       style=" width:440px; height:30px; text-indent:2em; float:left; box-shadow:none">
                <button onclick="search()">搜索</button>
            </div>
        </search>
        <div class="sping_car">
            <b></b>
            <a href="Cart.html"><em>我的购物车</em></a>
        </div>
    </header>
</div>

<!--导航-->
<section class="dao_hang">
    <nav>
        <!--全部商品分类-->
        <div class="important"><img src="images/all_list.png" style=" padding-top:8px">&nbsp;全部商品分类
            <aside>
                <ul>
                    <li class="cates" mt-ct="list01" style="height: 40px">
                        <a href="goodsList.html"><h3>手机</h3></a>
                    </li>
                    <li class="cates" mt-ct="list02" style="height: 50px">
                        <h3>笔记本</h3>
                    </li>
                    <li class="cates" mt-ct="list03" style="height: 50px">
                        <h3>平板</h3>
                    </li>
                    <li class="cates" mt-ct="list04" style="height: 50px">
                        <h3>智能穿戴&VR</h3>
                    </li>
                    <li class="cates" mt-ct="list05" style="height: 50px">
                        <h3>智能家居</h3>
                    </li>
                    <li class="cates" mt-ct="list06" style="height: 50px">
                        <h3>智慧屏</h3>
                    </li>
                    <li class="cates" mt-ct="list07" style="height: 50px">
                        <h3>耳机音箱</h3>
                    </li>
                    <li class="cates" mt-ct="list08" style="height: 50px">
                        <h3>配件</h3>
                    </li>
                </ul>
            </aside>
            <div>
                <div class="import_list b-list01">
                    <dt>HUAWEI Mate系列：</dt>
                    <dd>
                        <a href="#">HUAWEI Mate 40</a>
                        <a href="#">HUAWEI Mate 40 Pro</a>
                        <a href="#">HUAWEI Mate Xs</a>
                        <a href="#">HUAWEI Mate 40 RS</a>
                    </dd>
                    <dt>HUAWEI P系列：</dt>
                    <dd>
                        <a href="#">HUAWEI P40</a>
                        <a href="#">HUAWEI P40 Pro+</a>
                        <a href="#">HUAWEI P40</a>
                    </dd>
                    <dt>HUAWEI nova系列：</dt>
                    <dd>
                        <a href="#">HUAWEI nova 8 SE</a>
                        <a href="#">HUAWEI nova 7 SE</a>
                        <a href="#">HUAWEI nova 7</a>
                        <a href="#">HUAWEI nova 7 Pro</a>
                    </dd>
                    <dt>荣耀V系列：</dt>
                    <dd>
                        <a href="#">荣耀V30</a>
                        <a href="#">荣耀V30 Pro</a>
                    </dd>
                    <dt>荣耀系列：</dt>
                    <dd>
                        <a href="#">荣耀20青春版</a>
                        <a href="#">荣耀30</a>
                        <a href="#">荣耀30 Pro</a>
                        <a href="#">荣耀30S</a>
                        <a href="#">荣耀30青春版</a>
                    </dd>
                </div>
                <div class="import_list b-list02">
                    <dt>华为MateBook X系列：</dt>
                    <dd>
                        <a href="#">HUAWEI MateBook X 2020</a>
                        <a href="#">HUAWEI MateBook X Pro 2020</a>
                    </dd>
                    <dt>华为MateBook系列：</dt>
                    <dd>
                        <a href="#">HUAWEI MateBook 14 2020</a>
                        <a href="#">HUAWEI MateBook 13 2020</a>
                    </dd>
                    <dt>荣耀猎人游戏本系列：</dt>
                    <dd>
                        <a href="#">荣耀猎人游戏本HONOR HUNTER V700</a>
                    </dd>
                    <dt>荣耀MagicBook Pro系列：</dt>
                    <dd>
                        <a href="#">荣耀笔记本Pro 2020新款</a>
                        <a href="#">荣耀笔记本15 2020</a>
                        <a href="#">荣耀笔记本14</a>
                    </dd>
                </div>
                <div class="import_list b-list03">
                    <dt>华为MatePad 系列：</dt>
                    <dd>
                        <a href="#">HUAWEI MatePad Pro </a>
                        <a href="#">HUAWEI MatePad</a>
                    </dd>
                    <dt>荣耀 V系列：</dt>
                    <dd>
                        <a href="#">荣耀平板V6</a>
                    </dd>
                </div>
                <div class="import_list b-list04">
                    <dt>智能手表：</dt>
                    <dd>
                        <a href="#">HUAWEI WATCH GT 2 Pro ECG款 </a>
                        <a href="#">HUAWEI WATCH GT 2 保时捷设计款</a>
                        <a href="#">HUAWEI WATCH GT 2 运动款</a>
                        <a href="#">荣耀手表 GS Pro 运动款</a>
                        <a href="#">华为儿童手表 4X（映海蓝）</a>
                    </dd>
                    <dt>VR：</dt>
                    <dd>
                        <a href="#">NOLO CV1 Air VR定位交互套装</a>
                        <a href="#">HUAWEI VR Glass</a>
                        <a href="#">SPARKFOX VR健身控制器传感器套装</a>
                    </dd>
                    <dt>智能体脂秤：</dt>
                    <dd>
                        <a href="#">华为智能体脂秤 2 Pro</a>
                        <a href="#">荣耀智能体脂秤2</a>
                    </dd>
                    <dt>穿戴配件：</dt>
                    <dd>
                        <a href="#">STRAPBOX 复合表带 22mm</a>
                        <a href="#">HUAWEI EasyFit 氟橡胶表带</a>
                    </dd>
                </div>
                <div class="import_list b-list05">
                    <dt>智能路由：</dt>
                    <dd>
                        <a href="#">荣耀猎人路由</a>
                        <a href="#">华为子母路由 Q2 Pro</a>
                        <a href="#">荣耀分布式路由</a>
                    </dd>
                    <dt>移动路由：</dt>
                    <dd>
                        <a href="#">华为5G随行WiFi</a>
                        <a href="#">华为（HUAWEI）移动路由</a>
                    </dd>
                    <dt>HiLink生态：</dt>
                    <dd>
                        <a href="#"> 孩视宝智能面加环读写台灯 OG235B-AI</a>
                        <a href="#">艾沃 805-4家用净水器</a>
                        <a href="#">佑美家用静音折叠跑步机 F90H</a>
                        <a href="#">A.O.史密斯(A.O.Smith)零冷水热水器JSQ31-VJSX</a>
                    </dd>
                </div>
                <div class="import_list b-list06">
                    <dt>华为智慧屏：</dt>
                    <dd>
                        <a href="#">华为智慧屏X65</a>
                        <a href="#">华为智慧屏 V75</a>
                    </dd>
                    <dt>智慧屏配件：</dt>
                    <dd>
                        <a href="#">华为智慧屏直播精灵</a>
                        <a href="#">华为智慧屏触控遥控器</a>
                    </dd>
                </div>
                <div class="import_list b-list07">
                    <dt>智能音箱：</dt>
                    <dd>
                        <a href="#">HUAWEI Sound X 智能音箱</a>
                        <a href="#">HUAWEI Sound 智能音箱</a>
                    </dd>
                    <dt>真无线耳机：</dt>
                    <dd>
                        <a href="#">HUAWEI FreeBuds Pro</a>
                        <a href="#">HUAWEI FreeBuds Studio</a>
                    </dd>
                    <dt>智能眼镜：</dt>
                    <dd>
                        <a href="#">HUAWEI X GENTLE MONSTER Eyewear II</a>
                        <a href="#">HUAWEI X Gentle Monster Eyewear SMART MYMA-01</a>
                    </dd>
                </div>
                <div class="import_list b-list08">
                    <dt>充电器/线材：</dt>
                    <dd>
                        <a href="#">华为超级快充无线车充 CK030</a>
                        <a href="#">华为超级快充GaN双口充电器</a>
                    </dd>
                    <dt>移动电源：</dt>
                    <dd>
                        <a href="#">华为12000 66W SuperCharge多协议双向超级快充移动电源</a>
                        <a href="#">华为40W超级快充移动电源</a>
                    </dd>
                </div>
            </div>
        </div>
        <!--结束-->
        <div class="dao_list">
            <a href="index.html">首页</a>
            <a href="#">超级福包</a>
            <a href="#">母婴之家</a>
            <a href="#">厨房用品</a>
            <a href="#">生活必备</a>
            <a href="#">试吃申请</a>
            <a href="#">最新公告</a>
        </div>
    </nav>
</section>
<section class="cartMain" id="count">
    <div class="cartMain_hd">
        <ul class="order_lists cartTop">
            <li class="list_chk">
                <!--所有商品全选-->
                <input type="checkbox" @change="checkAll()" v-model="checked" class="whole_check">
                全选
            </li>
            <li class="list_con">商品信息</li>
            <li class="list_info">商品参数</li>
            <li class="list_price">单价</li>
            <li class="list_amount">数量</li>
            <li class="list_sum">金额</li>
            <li class="list_op">操作</li>
        </ul>
    </div>

    <div class="cartBox" v-for="(carts,index) in CartList">
        <div class="shop_info">
            <div class="all_check">
                <!--店铺全选-->
                <input type="checkbox" :value="carts" v-model="checkedShop" @change="checkShop()">

            </div>
            <div class="shop_name">
                店铺：<a href="">{{index}}</a>
            </div>
        </div>
        <div class="order_content" v-for="cart in carts">
            <ul class="order_lists" v-for="good in cart.goodList">
                <li class="list_chk">
                    <input type="checkbox" :value="good" v-model="checkedGood">

                </li>
                <li class="list_con">
                    <div class="list_img"><a href=""><img :src="good.goodImg" alt=""></a></div>
                    <div class="list_text"><a href="">{{good.goodName}}</a></div>
                </li>
                <li class="list_info">
                    <p>规格：默认</p>
                    <p>尺寸：16*16*3(cm)</p>
                </li>
                <li class="list_price">
                    <p class="price">￥{{good.goodPrice}}</p>
                </li>
                <li class="list_amount">
                    <div class="amount_box">
                        <a @click="reduce(cart,good)" class="reduce reSty">-</a>
                        <input type="text" :value="good.goodCount" class="sum">
                        <a @click="plus(cart,good)" class="plus">+</a>
                    </div>
                </li>
                <li class="list_sum">
                    <p class="sum_price">￥{{good.goodCount*good.goodPrice}}</p>
                </li>
                <li class="list_op">
                    <p class="del"><a @click="deleteCart1(cart,good.goodId)" class="delBtn">移除商品</a></p>
                </li>
            </ul>

        </div>
    </div>


    <!--底部-->
    <div class="bar-wrapper">
        <div class="bar-right">
            <div class="piece">已选商品<strong class="piece_num">{{checkedGood.length}}</strong>件</div>
            <div class="totalMoney">共计: <strong class="total_text">{{AllGoodsCount}}</strong></div>
            <div class="calBtn a"><a @click="PlaceOder()">结算</a></div>
        </div>
    </div>

</section>
<section class="model_bg"></section>
<section class="my_model">
    <p class="title">删除宝贝<span class="closeModel">X</span></p>
    <p>您确认要删除该宝贝吗？</p>
    <div class="opBtn"><a href="" class="dialog-sure">确定</a><a href="" class="dialog-close">关闭</a></div>
</section>


</body>
</html>
<script>


    let vm = new Vue({
        el: '#count',

        data: {
            //用户id
            userId: 0,
            //购物车集合
            CartList: [],
            //所有店铺集合
            AllShops: [],
            //所有商品集合
            AllGoods: [],
            //中间对象
            changeCheck: [],
            //已选商品集合
            checkedGood: [],
            //总计
            AllGoodsCount: 0,
            //选中店铺
            checkedShop: [],
            //中间变量
            hasGoods: [],
            //全选状态
            checked: false,


        },
        methods: {
            //获取数据渲染页面
            sendUser: function () {
                let user = getCookie("userMassage");
                if (user == null) {
                    alert("用户未登录，请登录");
                    location.href = appendBeforeHost("login.html");
                }
                let parse = JSON.parse(user);
                let userID = JSON.stringify(parse.userID);
                this.userId = userID;

                let url = "cart/showCart.do";
                let thisObj = this;


                postWithJson(url, userID, function (data) {
                    thisObj.CartList = data;
                    thisObj.CartList.forEach(cart => {
                        cart.goodList.forEach(good => {
                            thisObj.AllGoods.push(good)
                        })
                    })
                    const groupBy = (list, key) => {
                        const obj = {};
                        list.map(item => {
                            if (!obj.hasOwnProperty(item[key])) { //如果不存在这个属性
                                obj[item[key]] = [];
                            }
                            obj[item[key]].push(item);
                        });
                        return obj;
                    }

                    thisObj.CartList = groupBy(thisObj.CartList, 'shopName');

                });


            },

            //删除单行
            deleteCart: function (cart) {
                let thisObj = this;

                let url = "cart/deleteCart.do";
                postWithJson(url, cart, function () {
                    thisObj.sendUser();
                });


            },
            deleteCart1: function (cart, goodId) {
                let thisObj = this;
                cart = {
                    userID: cart.userID,
                    goodId: goodId
                }
                let url = "cart/deleteCart.do";
                postWithJson(url, cart, function () {
                    thisObj.sendUser();
                });
            },

            //减法
            reduce: function (cart, good) {
                let thisObj = this;
                if (good.goodCount > 1) {
                    good.goodCount = good.goodCount - 1;
                } else {
                    alert("商品数量不能小于1")
                }
                let url = 'cart/updateCart.do'
                let param = {
                    cartId: cart.cartId,
                    goodId: good.goodId,
                    num: good.goodCount,
                    userID: thisObj.userId
                }
                postWithJson(url, param, function (data) {
                    location.reload()
                })

            },
            //加法
            plus: function (cart, good) {
                let thisObj = this;
                good.goodCount = good.goodCount + 1;
                let url = 'cart/updateCart.do';
                let param = {
                    cartId: cart.cartId,
                    goodId: good.goodId,
                    num: good.goodCount,
                    userID: thisObj.userId
                }
                postWithJson(url, param, function (data) {
                    location.reload()
                })

            },
            //全选方法
            checkAll: function () {
                let thisObj = this;
                thisObj.AllShops = [];
                for (index in thisObj.CartList) {
                    thisObj.AllShops.push(thisObj.CartList[index])
                }
                if (thisObj.checked) {
                    thisObj.checkedShop = thisObj.AllShops
                } else {
                    thisObj.checkedShop = [];
                    thisObj.checkedGoods = [];
                }


            },
            //选择店铺方法
            checkShop: function () {

            },
            //下单方法
            PlaceOder: function () {
                let thisObj = this;
                //获取已选商品


                if (thisObj.AllGoodsCount === 0) {
                    alert("订单为空，请选择商品下单")
                    location.reload();
                    return;
                }

                //存到订单库中
                let url = 'order/AddOrder.do'
                let goodList = [];

                thisObj.checkedGood.forEach(good => {
                    goodList.push(good)
                })
                let orderNumber = (new Date()).valueOf();
                let param = {
                    good: goodList,
                    money: thisObj.AllGoodsCount,
                    userId: thisObj.userId,
                    orderNumber: orderNumber,
                    address: 0,
                }
                postWithJson(url, param, function (data) {

                })


                // 存到localstorage中
                localStorage.setItem("addOrder", JSON.stringify(param))
                localStorage.setItem("orderNumber", JSON.stringify(orderNumber))
                //

                //从购物车中删除上述商品购物车
                thisObj.checkedGood.forEach(good => {
                    let cart = {
                        goodId: good.goodId,
                        userID: thisObj.userId,
                    }
                    thisObj.deleteCart(cart);
                })
                alert("下单成功")
                //跳转到下单界面
                location.href = '/views/user_view/PlaceOrder.html';

            },


        },
        watch: {
            "CartList": function () {

                if (this.AllGoods.length === 0) {
                    alert("购物车没有商品，请购物吧！")
                    location.href = '/views/user_view/index.html';
                }
            },
            "checkedShop": function () {
                let thisObj = this;
                this.checkedShop.forEach(carts => {
                    carts.forEach(cart => {
                        cart.goodList.forEach(good => {
                            thisObj.hasGoods.push(good)
                        })
                    })
                })
                thisObj.checkedGood = thisObj.hasGoods;
                thisObj.hasGoods = [];
            },
            "checkedGood": function () {
                let thisObj = this;
                //计算总价
                thisObj.AllGoodsCount = 0;
                thisObj.checkedGood.forEach(good => {
                    thisObj.AllGoodsCount = thisObj.AllGoodsCount + (good.goodPrice * good.goodCount)
                })

            }


        },


        mounted: function () {
            this.sendUser();


        }
    })


</script>
